import React from 'react';
import Svg, { Path } from 'react-native-svg';

import { IconProps } from '../../types';

export const FileIcon = (props: IconProps) => {
  const { fill = 'white' } = props;
  return (
    <Svg width="100%" height="100%" viewBox="0 0 24 24" fill="none">
      <Path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M13 2.016L12.999 1.952C12.9801 1.70599 12.8737 1.47491 12.699 1.30063C12.5244 1.12634 12.293 1.0204 12.047 1.002L12 1H8.759C7.954 1 7.289 1 6.749 1.044C6.186 1.09 5.669 1.189 5.184 1.436C4.43139 1.81949 3.81949 2.43139 3.436 3.184C3.189 3.669 3.09 4.186 3.044 4.748C3 5.29 3 5.954 3 6.758V17.241C3 18.046 3 18.711 3.044 19.251C3.09 19.814 3.189 20.331 3.436 20.816C3.81949 21.5686 4.43139 22.1805 5.184 22.564C5.669 22.811 6.186 22.91 6.748 22.956C7.29 23 7.954 23 8.758 23H15.241C16.046 23 16.711 23 17.251 22.956C17.814 22.91 18.331 22.811 18.816 22.564C19.5686 22.1805 20.1805 21.5686 20.564 20.816C20.811 20.331 20.91 19.814 20.956 19.252C21 18.711 21 18.046 21 17.242V10L20.999 9.953C20.9808 9.70662 20.8748 9.47494 20.7003 9.30007C20.5258 9.12519 20.2943 9.01872 20.048 9H19.985H15.568C15.316 9 15.07 9 14.862 8.983C14.5946 8.96767 14.3328 8.89934 14.092 8.782C13.7157 8.59026 13.4097 8.28431 13.218 7.908C13.1006 7.6672 13.0323 7.40546 13.017 7.138C13 6.93 13 6.684 13 6.432V2.016ZM16.207 14.207C16.3892 14.0184 16.49 13.7658 16.4877 13.5036C16.4854 13.2414 16.3802 12.9906 16.1948 12.8052C16.0094 12.6198 15.7586 12.5146 15.4964 12.5123C15.2342 12.51 14.9816 12.6108 14.793 12.793L11 16.586L9.707 15.293C9.5184 15.1108 9.2658 15.01 9.0036 15.0123C8.7414 15.0146 8.49059 15.1198 8.30518 15.3052C8.11977 15.4906 8.0146 15.7414 8.01233 16.0036C8.01005 16.2658 8.11084 16.5184 8.293 16.707L10.293 18.707C10.4805 18.8945 10.7348 18.9998 11 18.9998C11.2652 18.9998 11.5195 18.8945 11.707 18.707L16.207 14.207Z"
        fill={fill}
      />
      <Path
        d="M18.908 6.99987C19.202 6.99987 19.348 6.99987 19.468 6.92587C19.5545 6.86725 19.622 6.78461 19.6622 6.68814C19.7023 6.59167 19.7134 6.48556 19.694 6.38287C19.66 6.24587 19.564 6.14987 19.374 5.95887L16.04 2.62687C15.849 2.43487 15.753 2.33887 15.616 2.30687C15.5135 2.28731 15.4076 2.29808 15.3111 2.33787C15.2147 2.37766 15.1319 2.44474 15.073 2.53087C14.999 2.65087 14.999 2.79787 14.999 3.09187V6.19987C14.999 6.47987 14.999 6.61987 15.054 6.72687C15.1019 6.82069 15.1782 6.89698 15.272 6.94487C15.38 6.99987 15.52 6.99987 15.8 6.99987H18.908Z"
        fill={fill}
      />
    </Svg>
  );
};

export const FileErrorIcon = (props: IconProps) => {
  const { fill = 'white' } = props;
  return (
    <Svg width="16" height="16" viewBox="0 0 24 24">
      <Path
        fill={fill}
        d="M18.5 20a.5.5 0 0 1-.5.5h-5.732A6.5 6.5 0 0 1 11.19 22H18a2 2 0 0 0 2-2V9.828a2 2 0 0 0-.586-1.414l-5.829-5.828l-.049-.04l-.036-.03a2 2 0 0 0-.219-.18a1 1 0 0 0-.08-.044l-.048-.024l-.05-.029c-.054-.031-.109-.063-.166-.087a2 2 0 0 0-.624-.138q-.03-.002-.059-.007L12.172 2H6a2 2 0 0 0-2 2v7.498a6.5 6.5 0 0 1 1.5-.422V4a.5.5 0 0 1 .5-.5h6V8a2 2 0 0 0 2 2h4.5zm-5-15.379L17.378 8.5H14a.5.5 0 0 1-.5-.5zM12 17.5a5.5 5.5 0 1 1-11 0a5.5 5.5 0 0 1 11 0M6.5 14a.5.5 0 0 0-.5.5v4a.5.5 0 0 0 1 0v-4a.5.5 0 0 0-.5-.5m0 7.125a.625.625 0 1 0 0-1.25a.625.625 0 0 0 0 1.25"></Path>
    </Svg>
  );
};
